<template>
	<div id="userInfo">
		<van-field
			v-model="username"
			name="username"
			maxlength="11"
			clearable
			label="手机号"
			type="tel"
			placeholder="请填写手机号"
			:rules="[{ pattern, message: '请填写正确11位手机号' }]"
		/>
		<van-field
			v-model="sms"
			name="verifyCode"
			center
			clearable
			type="digit"
			label="短信验证码"
			placeholder="请输入短信验证码"
			:rules="[{ required: true, message: '请输入您收到的手机验证码' }]"
			>
			<template #button>
				<van-button size="small" type="info" @click="getVerifyCode" native-type="button" :disabled="btnable">{{verifyCodeMsg}}</van-button>
			</template>
		</van-field>
		<van-field
			v-model="password"
			clearable
			type="password"
			name="password"
			label="密码"
			placeholder="请填写密码"
			:rules="[{ required: true, message: '请填写密码' }]" 
		/>
		<van-field
			v-model="ppassword"
			clearable
			type="password"
			name="ppassword"
			label="确认密码"
			placeholder="请再次输入密码"
			:rules="[{ required: true, message: '请再次输入密码' }]" 
		/>
	</div>
</template>

<script>
import { sendRegisterCode } from '@/api/register.js';
import { sendforgetPswCode } from '@/api/passwd.js';

export default {
	name: 'userInfo',
	data() {
		return {
			username: '',
			password: '',
			ppassword: '' ,
			sms: '',
			verifyCode: '', // 服务器传来的
			pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, // 手机号的正则表达式 
			btnable : false,
			verifyCodeMsg : '获取验证码'
		}
	},
	props: {
		passportType: {}  // 用来判断要发送哪种验证码  signUp  or  forgetPsw
	},
	methods: {
		async getVerifyCode() {
			// ↓↓ 获取验证码倒计时，且禁用button
			
			// ↓↓ 获取验证码
			if(this.username === '') {
				this.$toast('手机号为空');
			} else { // 不为空  服务器发送验证码
				if(this.passportType === 'signUp') {
					console.log('注册验证码请求中');
					await sendRegisterCode(this.username).then(res => {
						console.log(res);
						if(res.data.code === 0) {
							this.$toast('注册验证码请求成功');
							this.btnable = true;
							let cnt = 60
							let timer = setInterval(() => {
								this.verifyCodeMsg = cnt + 's后重新发送';
								cnt--;
								if(cnt < 0) {
									this.btnable = false;
									this.verifyCodeMsg = '获取验证码';
									clearInterval(timer);
								}
							}, 1000);

						} else if(res.data.code === 3003) {
							this.$toast('您输入的手机号非法或已被注册')
							
						} else {
							this.$toast(res.data.msg);
								
						} 
					}).catch(err => {
						console.log(err);
						
					})
				} else if(this.passportType === 'forgetPsw'){
					console.log('忘记密码验证码请求中');
					await sendforgetPswCode(this.username).then(res => {
						console.log(res);
						if(res.data.code === 0) {
							this.$toast('忘记密码验证码请求成功');
							this.btnable = true;
							let cnt = 60
							let timer = setInterval(() => {
								this.verifyCodeMsg = cnt + 's后重新发送';
								cnt--;
								if(cnt < 0) {
									this.btnable = false;
									this.verifyCodeMsg = '获取验证码';
									clearInterval(timer);
								}
							}, 1000);
						} else if(res.data.code === 3003){
							this.$toast('您输入的手机号非法或未注册')						
						} else {
							this.$toast(res.data.msg);								
						} 
					}).catch(err => {
						console.log(err);						
					});
				}

				

				
				
			}
		},
	}
}
	
</script>

<style>
</style>
